<template>
  <div class="list">
    <div class="list-item" v-for="(item, index) in vlist" :key="item.id">
      <vueMiniPlayer
        :ref="item.name"
        :video="item.video"
        @ready="ready"
        @fullscreen="handleFullscreen(index)"
        @videoPlay="videoPlay"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "video-player-page",
  data() {
    return {
      vlist: [],
      list: [
        {
          id: 1,
          type: "application/x-mpegURL", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          url: "https://open.ys7.com/v3/openlive/K55220002_1_2.m3u8?expire=1676093644&id=544149054741807104&t=d6d4a766e322d83cb1ecc10e41dfce7d5336ed11cfa7b16886192d5552fa63c7&ev=100",
        },
        {
          id: 2,
          url: "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4",
        },
        {
          id: 3,
          url: "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4",
        },
        {
          id: 4,
          url: "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4",
        },
        {
          id: 5,
          url: "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4",
        },
      ],
      video: {
        mutex: false,
        muted: true,
        loop: false,
        preload: "auto",
        poster: "",
        volume: 1,
        autoplay: true,
        type: "application/x-mpegURL", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
      },
    };
  },
  computed: {
    $video() {
      return this.vlist.map((items) => {
        return this.$refs[items.name][0].$video;
      });
    },
  },
  mounted() {
    this.vlist = this.list.map((item, index) => {
      item.name = `vueMiniPlayer${index}`;
      let obj = { ...this.video, ...item };
      item.video = obj;
      return item;
    });
  },
  methods: {
    ready() {
      console.log("ready");
    },
    videoPlay() {
      console.log(this.$video[0].muted);
      // this.$video.muted= false
    },
    handleFullscreen(params) {
      console.log(this.$video[0]);
      console.log(params);
    },
  },
};
</script>
<style scoped>
.list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.list-item {
  width: 32%;
  margin: 10px;
}
</style>
